Ga naar hoofdinhoud

Object destructuring

Property Shorthand (Eigenschap Verkorting)​

Wat is het?​

In JavaScript kun je objecten maken door eigenschappen (properties) en hun bijbehorende waarden toe te voegen. Soms gebruik je een variabele om een waarde vast te houden, en je wilt die variabele toevoegen als eigenschap van een object.

Met property shorthand hoef je minder te typen als de naam van de variabele en de naam van de eigenschap hetzelfde zijn.

Zonder shorthand​

Laten we zeggen dat je een object wilt maken dat de gegevens van een persoon bevat, zoals de naam en leeftijd. Je zou het als volgt kunnen doen:

const naam = "Lisa";
const leeftijd = 28;

// Een object maken zonder shorthand
const persoon = {
  naam: naam,
  leeftijd: leeftijd,
};

console.log(persoon);
// Output: { naam: "Lisa", leeftijd: 28 }

Hier schrijf je naam: naam en leeftijd: leeftijd. Dit betekent dat de eigenschap naam de waarde krijgt van de variabele naam, en hetzelfde geldt voor leeftijd.

Met shorthand​

Met property shorthand kun je dit eenvoudiger schrijven. Als de variabele en de eigenschap dezelfde naam hebben, kun je de dubbele notatie weglaten:

const naam = "Lisa";
const leeftijd = 28;

// Een object maken met shorthand
const persoon = {
  naam,
  leeftijd,
};

console.log(persoon);
// Output: { naam: "Lisa", leeftijd: 28 }

Wat gebeurt hier?

  • De JavaScript-engine begrijpt dat je zegt: "Maak een eigenschap genaamd naam en geef deze de waarde van de variabele naam."
  • Hetzelfde gebeurt met leeftijd.

Waarom gebruik je het?​

  • Het bespaart typen.
  • Het maakt je code netter en makkelijker te lezen.

Let op: Je kunt property shorthand alleen gebruiken als de naam van de variabele gelijk is aan de naam van de eigenschap. Als je de eigenschap een andere naam wilt geven, moet je de volledige notatie gebruiken:

const voornaam = "Lisa";
const persoon = {
  naam: voornaam, // Geen shorthand
};

Object Destructuring (Object Destructurering)​

Wat is het?​

Object destructuring is een handige manier om eigenschappen van een object "uit te pakken" en direct op te slaan in losse variabelen.

Stel dat je een object hebt met veel eigenschappen, en je hebt maar een paar daarvan nodig. In plaats van telkens object.eigenschap te typen, kun je destructuring gebruiken om ze snel op te halen.

Zonder destructuring​

Laten we een object persoon maken:

const persoon = {
  naam: "Lisa",
  leeftijd: 28,
  woonplaats: "Amsterdam",
};

// Toegang tot de eigenschappen zonder destructuring
const naam = persoon.naam;
const leeftijd = persoon.leeftijd;

console.log(naam); // Output: "Lisa"
console.log(leeftijd); // Output: 28

Hier haal je naam en leeftijd handmatig uit het object door telkens persoon.eigenschap te schrijven.

Met destructuring​

Met destructuring kun je dit eenvoudiger en netter doen:

const persoon = {
  naam: "Lisa",
  leeftijd: 28,
  woonplaats: "Amsterdam",
};

// Eigenschappen "uitpakken" met destructuring
const { naam, leeftijd } = persoon;

console.log(naam); // Output: "Lisa"
console.log(leeftijd); // Output: 28

Wat gebeurt hier?

  • Je zegt tegen JavaScript: "Haal de eigenschappen naam en leeftijd uit het object persoon en maak daar losse variabelen van met dezelfde namen."

Dit bespaart tijd en maakt je code duidelijker, vooral als je met grotere objecten werkt.

Andere mogelijkheden met destructuring​

Eigenschappen hernoemen​

Als je de variabelen een andere naam wilt geven, kun je dat doen tijdens het destructureren:

const persoon = {
  naam: "Lisa",
  leeftijd: 28,
};

const { naam: voornaam, leeftijd: jaren } = persoon;

console.log(voornaam); // Output: "Lisa"
console.log(jaren); // Output: 28

Hier worden:

  • naam hernoemd naar voornaam.
  • leeftijd hernoemd naar jaren.

Standaardwaarden instellen​

Als een eigenschap niet bestaat in het object, kun je een standaardwaarde instellen. Bijvoorbeeld:

const persoon = {
  naam: "Lisa",
};

const { naam, leeftijd = 30 } = persoon;

console.log(leeftijd); // Output: 30 (standaardwaarde)

Hier bestaat de eigenschap leeftijd niet in het object persoon, dus krijgt de variabele leeftijd de standaardwaarde 30.

Geneste objecten destructureren​

Als een object eigenschappen heeft die ook objecten zijn, kun je geneste destructuring gebruiken:

const persoon = {
  naam: "Lisa",
  details: {
    leeftijd: 28,
    woonplaats: "Amsterdam",
  },
};

const { details: { leeftijd, woonplaats } } = persoon;

console.log(leeftijd); // Output: 28
console.log(woonplaats); // Output: "Amsterdam"

Waarom gebruik je destructuring?​

  • Het maakt je code korter en overzichtelijker.
  • Je kunt eigenschappen eenvoudig hernoemen of standaardwaarden instellen.
  • Het werkt goed samen met functies die objecten als argumenten accepteren.

Bijvoorbeeld in een functie:

function printPersoon({ naam, leeftijd }) {
  console.log(`Naam: ${naam}, Leeftijd: ${leeftijd}`);
}

const persoon = { naam: "Lisa", leeftijd: 28 };
printPersoon(persoon); // Output: Naam: Lisa, Leeftijd: 28

Toegepast in VueJS​

In Vue.js-services wordt vaak een combinatie van property shorthand en object destructuring gebruikt, vooral binnen composable functions. Dit is een gangbare aanpak bij het werken met de Composition API om herbruikbare logica te creëren. Laten we dit verduidelijken met een typisch voorbeeld:

Wat gebeurt er​

  1. De structuur

    const useHero = () => {
        const name = ref('Superman');
        const power = ref('Flying');

        return { name, power };
    };
    • ref: Dit is een reactiviteitsfunctie in de Composition API die een reactieve waarde creëert.
    • return { name, power }:
      • Property shorthand wordt hier gebruikt. De name en power variabelen worden geretourneerd als eigenschappen met dezelfde naam.
      • Dit maakt het eenvoudiger om deze eigenschappen te gebruiken in andere componenten of services.

Hoe combineert dit property shorthand en destructuring?​

  • Property Shorthand: In de return-verklaring:

    return { name, power }; // Shorthand voor { name: name, power: power }

    Omdat de variabelen en eigenschapsnamen hetzelfde zijn, kun je shorthand gebruiken om minder code te schrijven.

  • Object Destructuring: Wanneer je de waarden later gebruikt:

    const { name, power } = useHero();
    console.log(name.value); // "Superman"
    console.log(power.value); // "Flying"

    Hier wordt destructuring toegepast om de name en power-eigenschappen van het geretourneerde object direct uit te pakken.

Een volledig voorbeeld: Hero Composable​

Composable Function:

import { ref } from 'vue';

const useHero = () => {
    const name = ref('Superman');
    const power = ref('Flying');

    const changeHero = (newName, newPower) => {
        name.value = newName;
        power.value = newPower;
    };

    return { name, power, changeHero }; // Shorthand
};

export {useHero};

Gebruik in een Component:

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ power }}</p>
    <button @click="changeHero('Batman', 'Martial Arts')">Change Hero</button>
  </div>
</template>

<script setup lang="ts">
import { useHero } from '@/services/heroServices';

const { name, power, changeHero } = useHero();
</script>

Waarom deze aanpak in Vue.js?​

  • Leesbaarheid: Het gebruik van shorthand en destructuring maakt je code kort en overzichtelijk.
  • Herbruikbaarheid: Composable functions zoals useHero bieden een krachtige manier om logica te organiseren en te delen.
  • Reactiviteit: Omdat Vue's reactiviteitssystemen zoals ref en reactive worden gebruikt, blijven de waarden automatisch synchroon met de UI.

Dit patroon is dus een elegant voorbeeld van hoe moderne JavaScript-technieken (zoals shorthand en destructuring) naadloos worden geïntegreerd in Vue.js-applicaties.